<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style1.css">
</head>
<body>
    <div class="steps">
        <div class="step active">1</div>
        <div class="step step2">2</div>
        <div class="step step3">3</div>
        <div class="step step4">4</div>
    </div>
    <div class="boxs">
        <div class="box">👨‍🦱</div>
    </div>
    <script>
        class pipe{
            constructor(){
                this.handles =[];
            }
            addHandle(hdl){
                this.handles.push(hdl);
                return this;
            }
            async start(ctx){
                for(let item of this.handles){
                    const rec = item.process(ctx);
                    if(rec && rec instanceof Promise)
                        await rec;
                }
            }
        }
        class handle{
            constructor(el){
                this.el = el;
            }
            process(ctx){
                this.el.classList.toggle("active");
                ctx.style.left = `${this.el.offsetLeft - 50}px`;

                this.handle(ctx);
            }
        }
        class handle1 extends handle{
            constructor(el){
                super(el);
            }
            handle(ctx){
               ctx.innerText="👦";
            }
        }
        class handle2 extends handle{
            constructor(el){
                super(el);
            }
            handle(ctx){
               ctx.innerText="👨‍🦳";
            }
        }
        class handle3 extends handle{
            constructor(el){
                super(el);
            }
            handle(ctx){
               ctx.innerText="👨‍🦲";
            }
        }
        class waitHandle{
            process(ctx){
                return new Promise((res,rej)=>{
                    setTimeout(() => {
                        res();
                    }, 3000);
                })
            }
        }
        

        const ip = new pipe()
        .addHandle(new waitHandle())
        .addHandle(new handle1(document.querySelector(".step2")))
        .addHandle(new waitHandle())
        .addHandle(new handle2(document.querySelector(".step3")))
        .addHandle(new waitHandle())
        .addHandle(new handle3(document.querySelector(".step4")))
        .start(document.querySelector(".box"));

    </script>
</body>

</html>